import React, { Component } from 'react'
import '../public/css/login.css'
import Wapper from '../Component/Wapper'
import GVerify from '../util/gverify'
import { inject, observer } from 'mobx-react';
import { Button,Alert } from 'antd';

@inject('authStore')
@observer
class Login extends Component {
  constructor(props){
    super(props)

    this.resetUse=this.resetUse.bind(this)
    this.login=this.login.bind(this)
      this.state={
        color:{color:'#0085d0'},
        isDelevlop:true
      }
  }

    componentWillMount() {
        this.props.authStore.isAuth=false
    }

    componentDidMount() {
     window.verifyCode=new GVerify({id:'wcode'})
  }
  resetUse(){
    this.props.authStore.values.username=''
  }
   changeDelevlop(){
      this.setState({
          isDelevlop:true
      })
       this.props.authStore.loginparam.login_type=1
   }
   changadmin(){
       this.setState({
           isDelevlop:false
       })
       this.props.authStore.loginparam.login_type=0
    }
  resetPas(){
      this.props.authStore.values.password=''
  }
  login(){
      if(window.txt.toLowerCase()==this.props.authStore.values.typeWord){
          this.props.authStore.login().then(()=>{
              this.props.authStore.isAuth=true
              this.props.history.push('/index/homePage')
          })

      }else{
          this.props.authStore.tips='验证码错误'
      }
  }
  render() { 
    const { values, tips, inProgress , logActive , isRemember , checkUsername ,setPassword ,checkWord,toggleCheck,login
            } = this.props.authStore;
    return ( 
     <Wapper pad='120px 0 0 0'> 
       <div>
          <img src={require('../public/images/loginbg.jpg')} alt="bgpic" style={{"height":"405px",'verticalAlign': 'top'}}/>       
          <div className="login-box">
              <div className="f20 mb-30 pos-rel"   style={{"width":"297px",'textAlign':'left','height':'22px'}}><span className='v-m cursor' onClick={this.changeDelevlop.bind(this)} style={this.state.isDelevlop?this.state.color:null}>开发者登录</span></div>
              <div className="login-input">
                    <input type="text" placeholder="请输入用户名" value={values.username} onChange={checkUsername.bind(this.props.authStore)}/>
                    <em onClick={this.resetUse}></em>
                    <input type="passWord" placeholder="请输入密码" value={values.password} className="input" onChange={setPassword.bind(this.props.authStore)}/>
                    <em onClick={this.resetPas.bind(this)}></em>
                    <input type="text" name="code" id="codeInput" value={values.typeWord} onChange={checkWord.bind(this.props.authStore)} className="input" placeholder="验证码"/>
                    <div id="wcode" className="wcodepic" title="看不清，换一张"></div>      
                </div>
              {tips?<Alert message={tips} type="error" showIcon />:null}
                <Button type="primary" style={{'width':'100%'}} loading={inProgress} disabled={logActive} className='mt-50 f16' onClick={this.login}>
                登录
                </Button>
                <p className="container clear">
                <span className="fl"><input type="checkbox" checked={isRemember}   onChange={toggleCheck.bind(this.props.authStore)} /><span className="f12 c5e">记住账号</span></span>
              </p>
          </div>
       </div>
      </Wapper>
     )
  }
}
 
export default Login;

